<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>导航模块</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="navType" style="margin-right:5px" placeholder="选择订单状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-button class="margin-r-5" size="small" @click="getNavList(1,navType)">查询</el-button>
                </div>
            </div>
            <el-row>
                <el-button size="small" type="primary" @click="addNav()">新增</el-button>
            </el-row>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="navList" style="width: 100%" stripe border>
                    <el-table-column align="center" type="selection" width="40"></el-table-column>
                    <el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
                    <el-table-column align="center" prop="title" label="标题"></el-table-column>
                    <!-- <el-table-column align="center" prop="url" label="url"></el-table-column> -->
                    <el-table-column align="center" prop="status" label="状态" width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.status==1?'启用':'停用'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="sorting" label="排序"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope" width="200">
                            <el-button size="mini" type="text" @click="deleteNav(scope.row.id)">删除</el-button>
							<el-button size="mini" type="text" @click="editNav(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count"></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            navList: [],
            count: 100,
            size: 10,
            page: 1,
            navType: '',
            options: [
                {
                    value: 1,
                    label: "首页顶部导航",
                },
                {
                    value: 2,
                    label: "内容详情页导航",
                }
            ],
        };
    },
    created() {
        this.getNavList(this.page);
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.getNavList(1);
        },
        deleteNav(id) {
            let _this = this;
            this.$confirm("您确定要删除么?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$axios({
                        url: "admin/home/delTopNav",
                        data: {
                            tNavIDS:[id],
                        },
                        success(res) {
                            if (res.data.code === 200) {
                                _this.$message({
                                    type: "success",
                                    message: res.data.msg
                                });
                                _this.getNavList(_this.page);
                            } else {
                                _this.$message({
                                    type: "warning",
                                    message: res.data.msg
                                });
                            }
                        }
                    });
                });
        },

        getNavList(page) {
            let _this = this;
            this.$axios({
                url: "admin/home/getTopNav",
                data: {
                    offset: page,
                    limit: _this.size,
                    type: 2,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.navList = res.data.content.data;
                        _this.count = Number(res.data.content.count);
                    }
                },
            });
        },
        addNav() {
            this.$router.push({ path: "add", query: { type: 1, } });
        },
		editNav(info){
			this.$router.push({ path: "add", query: { type: 2,info:info} });
		}
    },
};
</script>
<style scoped>
.a {
    vertical-align: middle;
}
</style>